import React from 'react';
/* eslint-disable */
import PDF from 'react-pdf-js';
/**
 * 1：暂只支持pdf
 * 2：PDF 不能跨域
 */
class MyPdfViewer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    // pages：总页数
    onDocumentComplete = (pages) => {
        this.setState({ page: 1, pages });
    }
    // page：当前页
    onPageComplete = (page) => {
        this.setState({ page });
    }

    // 上一页
    handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
    }

    // 下一页
    handleNext = () => {
        this.setState({ page: this.state.page + 1 });
    }

    renderPagination = (page, pages) => {
        let previousButton = <li className="previous" onClick={this.handlePrevious}><a><i className="fa fa-arrow-left"></i> Previous</a></li>;
        if (page === 1) {
            previousButton = <li className="previous disabled"><a><i className="fa fa-arrow-left"></i> Previous</a></li>;
        }
        let nextButton = <li className="next" onClick={this.handleNext}><a>Next <i className="fa fa-arrow-right"></i></a></li>;
        if (page === pages) {
            nextButton = <li className="next disabled"><a>Next <i className="fa fa-arrow-right"></i></a></li>;
        }
        return (
            <nav>
                <ul className="pager">
                    {previousButton}
                    {nextButton}
                </ul>
            </nav>
        );
    }

    render() {
        let pagination = null;
        if (this.state.pages) {
            pagination = this.renderPagination(this.state.page, this.state.pages);
        }

        /**
         * 暂时采用 iframe 嵌入加载 pdf 文件的方式实现文档预览
         */
        return (
            <div style={{ backgroundColor: '#EAEAEA' }}>
                {/* <div style={{ textAlign: 'center', width: '100%' }}>
                    {pagination}
                    <PDF
                        style={{ textAlign: 'center' }}
                        file='/staticImage/news/20180113/1515779771146.pdf'
                        onDocumentComplete={this.onDocumentComplete}
                        onPageComplete={this.onPageComplete}
                        page={this.state.page}
                    />
                    {pagination}
                </div> */}
                {/* http://view.officeapps.live.com/op/view.aspx?src=http://222.28.49.253/staticImage/news/20180113/1515779771146.pdf */}
                <iframe
                    src="http://222.28.49.253/staticImage/news/20180113/1515779771146.pdf"
                    name="doc"
                    scrolling="no"
                    seamless="seamless"
                    frameBorder="0"
                    width="100%"
                    height="100%"
                ></iframe>
            </div>
        )
    }
}
/* eslint-disable */

export default MyPdfViewer;